<template>
<!--  <h2>库房</h2>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container" :style="{height:treeHeight+'px'}" style="overflow-y: auto">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                   :filter-node-method="filterNode" :default-expanded-keys="expandedkeys"
                   :current-node-key="currentNodekey" ref="tree" node-key="id" default-expand-all highlight-current
                   @node-click="handleNodeClick">
            <template slot-scope="{ node, data }">
              <span class="span-ellipsis" :title="node.label" :style="size">{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div v-show="isShowView">
          <div class="titlebox" v-show="isShowA">A面</div>
          <table style="display: flex; justify-content: center;">
            <tbody v-html="backendData" @click="handleClick">
            </tbody>
          </table>
          <div class="titlebox" v-show="isShowB">B面</div>
          <table style="display: flex; justify-content: center;">
            <tbody v-html="backendData1" @click="handleClick">
            </tbody>
          </table>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="详情" :visible.sync="detailOpen" width="55%" append-to-body>
      <div>
        <ul class="detail" ref="detailForm" :model="detailForm">
          <li class="list-item"><label>格子编号：</label>{{ detailForm.gridCode }}</li><li class="list-item"><label>格子名称：</label>{{ detailForm.gridName }}</li>
          <li class="list-item"><label>所属档案柜：</label>{{ detailForm.shelfName }}</li><li class="list-item"><label>档案柜AB面：</label>{{ detailForm.gridSide }}</li>
          <li class="list-item"><label>格子宽度：</label>{{ detailForm.gridWidth }}</li><li class="list-item"><label>格子列号：</label>{{ detailForm.gridStdnum }}</li>
          <li class="list-item"><label>格子行号：</label>{{ detailForm.gridCrsnum }}</li><li class="list-item"><label>装有数量：</label>{{ detailForm.putawayNum }}</li>
        </ul>
      </div>
      <div class="table">
        <el-form :model="queryParams" ref="queryForm"  :inline="true">
          <div style="display: flex; align-items: center;">
            <h2>档案列表</h2>
            <el-form-item prop="leixing" style="padding-top: 20px; padding-left: 10px">
              <el-select v-model="queryParams.leixing" style="width: 120px">
                <el-option v-for="(dict, index) in TypeOption" :key="index" :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <el-table v-loading="loading" :data="HeList" v-show="isShowHe" @row-dblclick="openHeDetails" height="300">
          <el-table-column label="序号" type="index" :index="table_index" prop="id" />
          <el-table-column label="盒号" prop="hehao" :show-overflow-tooltip="true" />
          <el-table-column label="档案门类" prop="daml" :show-overflow-tooltip="true" />
<!--          <el-table-column label="整理方式" prop="zlfs" :show-overflow-tooltip="true" />-->
          <el-table-column label="保管期限" prop="bgqx" :show-overflow-tooltip="true" />
          <el-table-column label="起始年度" prop="boxStnd" :show-overflow-tooltip="true" />
          <el-table-column label="终止年度" prop="boxEdnd" :show-overflow-tooltip="true" />
          <el-table-column label="件号(起)" prop="boxStnum" :show-overflow-tooltip="true" />
          <el-table-column label="件号(止)" prop="boxEdnum" :show-overflow-tooltip="true" />
          <el-table-column label="规格" prop="specName" :show-overflow-tooltip="true" />
          <el-table-column label="上架时间" prop="sjTime" :show-overflow-tooltip="true" />
          <el-table-column label="位置" prop="position" :show-overflow-tooltip="true" />
        </el-table>
        <el-table v-loading="loading" :data="JuanList" v-show="isShowJuan" @row-dblclick="openJuanDetails" height="300">
          <el-table-column label="序号" type="index" :index="table_index" prop="id" />
          <el-table-column label="案卷题名" prop="title" :show-overflow-tooltip="true" />
          <el-table-column label="档号" prop="dh" :show-overflow-tooltip="true" />
          <el-table-column label="保管期限" prop="bgqx" :show-overflow-tooltip="true" />
          <el-table-column label="归档司局" prop="gdsj" :show-overflow-tooltip="true" />
          <el-table-column label="归档处室" prop="gdcs" :show-overflow-tooltip="true" />
          <el-table-column label="上架时间" prop="sjTime" :show-overflow-tooltip="true" />
          <el-table-column label="位置" prop="position" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getTableList" />
      </div>
    </el-dialog>

    <!-- 按卷上架列表页面双击 -->
    <upJuanDetail :upJuanOpen="upJuanOpen" @upJuanCancel="upJuanCancel" ref="upJuanRef"></upJuanDetail>

    <!-- 按盒上架列表页面双击 -->
    <upHeDetail :upHeOpen="upHeOpen" @upHeCancel="upHeCancel" ref="upHeRef"></upHeDetail>
  </div>
</template>

<script>
import {getTreeList} from "@/api/archive/warehouseManagement/warehouseInformation";
import {getDetail, getHtml, html} from "@/api/archive/warehouseManagement/storeroom";
import {getDataList} from "@/api/archive/warehouseManagement/upDownShelves";
import upJuanDetail from "@/views/archive/warehouseManagement/upDownShelves/upJuanDetail";
import upHeDetail from "@/views/archive/warehouseManagement/upDownShelves/upHeDetail";
import estimateTableHeight from "@/mixins/estimateTableHeight";

export default {
  name: "index",
  archive_Dicts: ['BGQX'],
  mixins: [estimateTableHeight], // 混入方法
  components: {
    upJuanDetail, upHeDetail
  },
  data() {
    return {
      size: "",
      storeroomForm: {},
      // 树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      // 是否展示库房平面图
      isShowView: false,
      isShowA: false,
      isShowB: false,
      backendData: "",
      backendData1: "",

      // 详情页面
      detailOpen: false,
      detailForm: {},
      loading: false,
      grid: "",
      HeList: [],
      JuanList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        leixing: '0' // 默认选项为按盒上架
      },
      TypeOption: [
        { value: '0', label: '按盒上架'},
        { value: '1', label: '按卷上架'}
      ],
      isShowHe: false,
      isShowJuan: false,
      shelfSideOption: [
        {value: 'A', label: 'A面'},
        {value: 'B', label: 'B面'},
        {value: 'AB', label: 'A面,B面'},
      ],
      // 是否打开详情页
      upJuanOpen: false,
      // 是否打开详情页
      upHeOpen: false,
    }
  },
  created() {
    if (this.$store.getters.size == 'small') {
      this.size = 'font-size: 12px;'
    } else {
      this.size = 'font-size: 14px;'
    }
    this.getDeptTree()
  },
  watch: {
    'queryParams.leixing': {
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue !== '') {
          console.log('下拉框的值有变化', newValue);
          this.getTableList()
          if(newValue == '0') {
            this.isShowHe = true
            this.isShowJuan = false
          } else {
            this.isShowHe = false
            this.isShowJuan = true
          }
        }
      }
    }
  },
  methods: {
    getDeptTree(){
      getTreeList().then(response => {
        // console.log(response.data)
        this.deptOptions = response.data;
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      // console.log(data)
      // id、节点类型
      this.storeroomForm.id = data.id
      this.storeroomForm.nodeType = data.nodeType

      if(data.nodeType == "shelf") {
        this.isShowView = true
        this.getList()
      } else {
        this.isShowView = false
      }
    },
    getList() {
      html(this.storeroomForm.id).then(response=>{
        if(response.data.html != "") {
          this.isShowA = true
        } else {
          this.isShowA = false
        }
        this.backendData = response.data.html
      })
      getHtml(this.storeroomForm.id).then(response=>{
        if(response.data.html != "") {
          this.isShowB = true
        } else {
          this.isShowB = false
        }
        this.backendData1 = response.data.html
      })
    },
    handleClick(event) {
      let target = event.target;

      while (target) {
        const onclickAttribute = target.getAttribute('@click');
        if (onclickAttribute) {
          // 找到具有onclick属性的父元素
          // 处理点击事件
          const match = onclickAttribute.match(/showInfo\((.*?)\)/);

          if (match && match[1]) {
            const params = match[1].split(',');
            const param1 = params[0];
            const param2 = params[1];
            const param3 = params[2];
            const param4 = params[3];

            this.showInfo(param1, param2, param3, param4);
          }
          break;
        }
        target = target.parentElement;
      }
    },
    showInfo(grid,guiid,storeid,position) {
      console.log('showInfo:', grid,guiid,storeid,position);
      this.grid = grid
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      getDetail(grid).then(response=>{
        console.log(response)
        this.detailForm = response.data
        for (let j = 0; j < this.shelfSideOption.length; j++) {
          if(response.data.gridSide == this.shelfSideOption[j].value){
            this.detailForm.gridSide = this.shelfSideOption[j].label
          }
        }
        this.detailOpen = true
      })
      this.getTableList()
    },
    getTableList() {
      this.loading = true
      // console.log(this.queryParams.leixing,'=============',this.grid)
      if(this.queryParams.leixing == '1'){
        // console.log("卷")
        this.queryParams.gridId = this.grid
        this.queryParams.sjType = '1'
        this.queryParams.type = '1'
        getDataList(this.queryParams).then(response => {
          this.JuanList = response.rows
          for (let i = 0; i < response.rows.length; i++) {
            // 渲染表格数据
            for (let j = 0; j < this.dict.type.BGQX.length; j++) {
              if(response.rows[i].bgqx == this.dict.type.BGQX[j].value){
                this.JuanList[i].bgqx = this.dict.type.BGQX[j].label
              }
            }
          }
          this.total = response.total
          this.loading = false
        })
      } else {
        // console.log("盒")
        this.queryParams.gridId = this.grid
        this.queryParams.sjType = '0'
        this.queryParams.type = '1'
        getDataList(this.queryParams).then(response => {
          this.HeList = response.rows
          for (let i = 0; i < response.rows.length; i++) {
            // 渲染表格数据
            for (let j = 0; j < this.dict.type.BGQX.length; j++) {
              if(response.rows[i].bgqx == this.dict.type.BGQX[j].value){
                this.HeList[i].bgqx = this.dict.type.BGQX[j].label
              }
            }
            if(response.rows[i].specDw == '0'){
              this.HeList[i].specName = response.rows[i].specName + 'mm'
            } else {
              this.HeList[i].specName = response.rows[i].specName + 'cm'
            }
          }
          this.total = response.total
          this.loading = false
        })
      }
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    // 双击行数据出现新页面
    openJuanDetails(row) {
      // console.log("双击了",row.id)
      const id = row.id
      this.upJuanOpen = true
      this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
        this.$refs.upJuanRef.init(id);     //获取子组件中init方法并将父组件数据传递给子组件
      });
    },
    upJuanCancel() {
      this.upJuanOpen = false
    },

    // 双击行数据出现新页面
    openHeDetails(row) {
      console.log("双击了",row)
      const id = row.id
      this.upHeOpen = true
      this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
        this.$refs.upHeRef.init(id);     //获取子组件中init方法并将父组件数据传递给子组件
      });
    },
    upHeCancel() {
      this.upHeOpen = false
    },

  }
}
</script>

<style lang="scss">
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.titlebox{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10px;
  margin:  20px;
}

.list-item {
  font-size: 18px;
  line-height: 50px;
  height: 50px;
  width: 45%;
  display: inline-block;
  margin-right: 20px; /* 可根据需要调整元素之间的间距 */
}

.list-item label {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.listClass {
  background-image: url("../../../../assets/images/cubage_use_1.jpg");
}
</style>
